<template>
  <div class="container">
    <div class="header">
      <div class="title">闸坝智能调度与安全检测</div>
      <div class="menu">
        <div class="item active">总体概况</div>
        <div class="item" @click="router.push({ path: '/szsyBeijiangIndex' })">北江船闸</div>
        <div class="item" @click="router.push({ path: '/szsyLianjiangIndex' })">连江闸坝</div>
      </div>
    </div>
    <div class="main">
      <div class="left-content">
        <div class="title">整体情况-北江船闸</div>
        <div class="subtitle">
          <div class="name">实时水位统计分析</div>
          <div class="time">时间：{{ new Date().format('yyyy年MM月dd日hh时') }}</div>
        </div>
        <div id="first-chart"></div>
        <div class="subtitle">
          <div class="name">过闸船舶货物吨位统计分析</div>
          <el-date-picker
            v-model="year"
            type="year"
            size="small"
            :clearable="false"
            @change="yearChange"
            placeholder="请选择年份"
            style="width: 150px;"
          />
        </div>
        <div class="count">
          <div class="count-item">
            <div class="name">总上行船舶数（艘）</div>
            <div class="value">{{ totalUpShipNum }}</div>
          </div>
          <div class="count-item">
            <div class="name">总下行船舶数（艘）</div>
            <div class="value">{{ totalDownShipNum }}</div>
          </div>
        </div>
        <div id="second-chart"></div>
        <div class="subtitle">
          <div class="name">过闸船舶货物类型统计分析</div>
          <el-date-picker
            v-model="date"
            type="daterange"
            size="small"
            @change="dateChange"
            :clearable="false"
            value-format="YYYY-MM-DD"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"   
            style="width: 180px;margin-left: 20px;"          
          />
        </div>
        <div class="pie-info">
          <div id="third-chart"></div>
          <div class="pie-table">
            <div class="pie-tbody">
              <div class="pie-tr" v-for="(item,index) in pieChartData" :key="index">
                <div style="display: flex;align-items: center;width: 50%;">
                  <div class="li" :style="`background:${item.itemStyle?item.itemStyle.color:''}`"></div>
                  <div class="pie-td">{{ item.name }}</div>
                </div>     
                <div class="pie-td" style="width: 25%;">{{ item.load }}吨</div>  
                <div class="pie-td" style="width: 25%;">{{ item.value }}%</div>
              </div>
            </div>
          </div>
        </div>        
      </div>
      <div class="middle-content">
        <div class="map">
          <OlArc ref="OlArcRef"></OlArc>
          <div class="legend">          
            <div class="legend-item">
              <img src="../../assets/images/big-screen/icon-beijiang.png" alt="">
              <div>北江船闸</div>
            </div>  
            <div class="legend-item">
              <img src="../../assets/images/big-screen/icon-lianjiang.png" alt="">
              <div>连江船闸</div>
            </div>    
          </div>
          <div class="statistics">
            <div class="statistics-item" style="margin-bottom: 10px;">
              <div class="top-info">北江船闸数，共<span style="color: #78DFFF;">{{ beijiangData.totalNum }}</span>个</div>
              <div class="bottom-info">
                <div class="level-data">
                  <div class="name">Ⅲ级</div>
                  <div class="value">{{ beijiangData.three }}</div>
                </div>
                <div class="level-data">
                  <div class="name">Ⅳ级</div>
                  <div class="value">{{ beijiangData.four }}</div>
                </div>
                <div class="level-data">
                  <div class="name">Ⅴ级</div>
                  <div class="value">{{ beijiangData.five }}</div>
                </div>                
              </div>
            </div>
            <div class="statistics-item">
              <div class="top-info">连江船闸数，共<span style="color: #78DFFF;">{{ lianjiangData.totalNum }}</span>个</div>
              <div class="bottom-info">
                <div class="level-data">
                  <div class="name">Ⅳ级</div>
                  <div class="value">{{ lianjiangData.four }}</div>
                </div>
                <div class="level-data">
                  <div class="name">Ⅵ级</div>
                  <div class="value">{{ lianjiangData.six }}</div>
                </div>                
              </div>
            </div>
          </div>
          <div class="filter">
            <div class="filter-title" @click="isShowFilter = !isShowFilter">
              <div>筛选</div>
              <img src="../../assets/images/big-screen/icon-shouqi.png" v-if="!isShowFilter">
              <img src="../../assets/images/big-screen/icon-zhankai.png" v-else>
            </div>
            <div v-show="isShowFilter">
              <div class="filter-item">
                <div class="name">船闸</div>
                <el-checkbox-group
                  v-model="checkedValues1"
                  @change="handleCheckedChange1"
                  style="display: flex;flex-direction: column;margin-left: 20px;"
                >
                  <el-checkbox
                    v-for="item in options1"
                    :key="item"
                    :label="item"
                    :value="item"
                  >
                    {{ item }}
                  </el-checkbox>
                </el-checkbox-group>
              </div>
              <div class="filter-item">
                <div class="name">航道</div>
                <el-checkbox-group
                  v-model="checkedValues2"
                  @change="handleCheckedChange2"
                  style="display: flex;flex-direction: column;margin-left: 20px;"
                >
                  <el-checkbox
                    v-for="item in options2"
                    :key="item"
                    :label="item"
                    :value="item"
                  >
                    {{ item }}
                  </el-checkbox>
                </el-checkbox-group>
              </div>
              <div class="filter-item">
                <div class="name">辖区</div>
                <el-checkbox-group
                  v-model="checkedValues3"
                  @change="handleCheckedChange3"
                  style="display: flex;flex-direction: column;margin-left: 20px;"
                >
                  <el-checkbox
                    v-for="item in options3"
                    :key="item"
                    :label="item"
                    :value="item"
                  >
                    {{ item }}
                  </el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
          </div>
        </div>
        <div class="title">航道通告</div>
        <div class="notice-list">
          <div class="notice-item" v-for="(item,index) in noticeData" :key="index" @click="seeNotice(item.contents)">
            {{ item.title }}
          </div>
        </div>
      </div>
      <div class="right-content">
        <div class="title">整体情况-连江闸坝</div>
        <div class="subtitle">
          <div class="name">变形监测统计分析</div>          
        </div>
        <div class="list">
          <div v-for="(item,index) in deformationData" :key="index" class="list-item">
            <div class="item-title">{{ item.name }}</div>
            <div class="item-name">
              <div>预警数</div>
              <div>一级</div>
              <div>二级</div>
              <div>三级</div>
            </div>
            <div class="item-value">
              <div>{{ item.totalnum }}</div>
              <div>{{ item.onelevel }}</div>
              <div>{{ item.twolevel }}</div>
              <div>{{ item.threelevel }}</div>
            </div>
          </div>
        </div>
        <div class="subtitle">
          <div class="name">变形监测观测周期统计分析</div>   
          <el-radio-group v-model="radio" size="small" @change="radioChange">
            <el-radio-button label="船闸" value="船闸" />
            <el-radio-button label="水坝" value="水坝" />
          </el-radio-group>       
        </div>
        <div id="fourth-chart" v-show="radio === '船闸'"></div> 
        <div id="fifth-chart"  v-show="radio === '水坝'"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted, nextTick } from 'vue';
  import { useRouter } from "vue-router";
  const router = useRouter();

  //引入echarts
  import * as echarts from 'echarts/core';
  import { TooltipComponent, LegendComponent, GridComponent, DataZoomComponent } from 'echarts/components';
  import { PieChart, BarChart, LineChart } from 'echarts/charts';
  import { CanvasRenderer } from 'echarts/renderers';
  echarts.use([TooltipComponent, LegendComponent, GridComponent, DataZoomComponent, PieChart, BarChart, LineChart, CanvasRenderer]);

  // 引入api
  import {
    newWater, //实时水位统计分析
    goodsTonAlys, //过闸船舶货物吨位统计分析
    goodsAnalysis, //过闸船舶货物类型统计分析
    defAlySmall, //变形监测统计分析
    circleAlys, //变形监测观测周期统计分析
    screenMapData, //基本情况
    allWaterWayNotice, //航道通告
  } from "@/bridge-h5/utils/myapi";

  //地图
  import OlArc from "./olArcGateDam.vue";
  const OlArcRef = ref(null); 

  //实时水位
  const newWaterFn = () => {
    nextTick(() => {
      newWater().then((res) => {
        if(res.code === 200){
          let xAxisData = [];
          let seriesData = [];
          res.data.forEach((item) => {
            xAxisData.push(item.name);          
            seriesData.push(item.waterLevel);
          });
          let lineChart = echarts.getInstanceByDom(document.getElementById("first-chart"));
          if(lineChart != null && lineChart != "" && lineChart != undefined){
            lineChart.dispose();
          }
          lineChart = echarts.init(document.getElementById('first-chart'));
      
          let option;
          option = {
            tooltip: {
              trigger: 'axis',
              confine: true, //限制在图表区域内
              formatter: function (params) {
                let template = `${params[0].axisValue}<br>`;         
                for(let i = 0; i < params.length; i++){
                  let item = params[i];
                  template += item.marker + '水位值: ' + item.value + 'm' + '<br>'
                }  
                return template  
              },
            },
            grid: {
              top: '40px',
              left: '40px',
              right: '15px',
              bottom: '35%',
            },
            dataZoom: [
              {
                show: false,
                type: "inside",
                zoomLock: false,
              },
            ],
            xAxis: {
              type: 'category',
              axisLabel: {
                rotate: 60,
                color: '#262626'
              },              
              data: xAxisData,
            },
            yAxis: {
              type: 'value',
              name: '水位：m',
              axisLabel: {
                color: '#262626'
              },  
              nameTextStyle: {
                color: '#262626'
              },
            },
            series: [
              {
                data: seriesData,
                type: 'line',
                
              }
            ]
          };
          option && lineChart.setOption(option);
        }
      });  
    });
  };
  //过闸船舶货物吨位统计分析
  const year = ref(new Date().format("yyyy"));
  const totalUpShipNum = ref(0);
  const totalDownShipNum = ref(0);
  const goodsTonAlysFn = () => {
    goodsTonAlys(
      "", 
      `${year.value}-01-01`, 
      `${year.value}-12-31`
    ).then((res) => {
      if(res.code === 200 && res.data){
        totalUpShipNum.value = res.data.totalUpShipNum;
        totalDownShipNum.value = res.data.totalDownShipNum;
        let emptyData = [];
        let num1Data = [];
        let num2Data = [];
        let num3Data = [];
        let num4Data = [];
        let upShipNumData = [];
        let downShipNumData = [];
        res.data.tons.forEach((item) => {
          emptyData.push(item.empty);
          num1Data.push(item.num1);
          num2Data.push(item.num2);
          num3Data.push(item.num3);
          num4Data.push(item.num4);
          upShipNumData.push(item.upShipNum);
          downShipNumData.push(item.downShipNum);
        });

        let stackedChart = echarts.getInstanceByDom(document.getElementById("second-chart"));
        if(stackedChart != null && stackedChart != "" && stackedChart != undefined){
          stackedChart.dispose();
        }
        stackedChart = echarts.init(document.getElementById('second-chart'));
        let option;
        option = {
          tooltip: {
            trigger: 'axis',
            confine: true, //限制在图表区域内 
            formatter: (params) => {
              // console.log(params)
              let template = `<b>${params[0].axisValue}</b><br>` + `上行船舶数<b style="float:right;padding-left: 20px;">${upShipNumData[parseInt(params[0].axisValue.split('月')[0])-1]}艘</b><br>下行船舶数<b style="float:right;padding-left: 20px;">${downShipNumData[parseInt(params[0].axisValue.split('月')[0])-1]}艘</b><br>`; 
              let count = 0;      
              for(let i = 0; i < params.length; i++){              
                let item = params[i];   
                template += item.marker + item.seriesName + `<b style="float:right;padding-left: 20px;">${item.value}艘</b><br>`;    
                count += item.value;                      
              }  
              return template + `<b style="position: absolute;top: 10px; right: 10px;">总共：${count}艘</b>`;
            },  
          },
          legend: {    
            type: 'scroll',         
          },
          grid: {
            top: '60px',
            left: '50px',
            right: '20px',
            bottom: '30px',
          },
          xAxis: [
            {
              type: 'category',
              axisLabel: {
                interval: 0,
                color: '#262626' 
              },
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '船舶数：艘',
              axisLabel: {
                color: '#262626'
              },  
              nameTextStyle: {
                color: '#262626'
              },
            }
          ],          
          series: [
            {
              name: '空载',
              type: 'bar', 
              stack: 'Search Engine',
              barWidth: "15%",              
              emphasis: {
                //折线图的高亮状态。
                focus: 'series' 
              },
              data: emptyData,              
            },
            {
              name: '0-500吨',
              type: 'bar',
              stack: 'Search Engine',
              barWidth: "15%",              
              emphasis: {
                focus: 'series'
              },
              data: num1Data
            },
            {
              name: '500-1000吨',
              type: 'bar',
              stack: 'Search Engine',
              barWidth: "15%",              
              emphasis: {
                focus: 'series'
              },
              data: num2Data
            },
            {
              name: '1000-3000吨',
              type: 'bar',
              stack: 'Search Engine',
              barWidth: "15%",              
              emphasis: {
                focus: 'series'
              },
              data: num3Data
            },
            {
              name: '3000吨以上',
              type: 'bar',
              stack: 'Search Engine',
              barWidth: "15%",              
              emphasis: {
                focus: 'series'
              },
              data: num4Data
            }
          ]
        };

        option && stackedChart.setOption(option);
      }
    });    
  };
  const yearChange = (val) => {
    year.value = new Date(val).format("yyyy");
    goodsTonAlysFn();
  };
  //过闸船舶货物类型统计分析
  const sevenDaysAgo = new Date(new Date().getTime() - 6 * 24 * 60 * 60 * 1000); 
  const sevenDaysAgoFormatted = ref(`${sevenDaysAgo.getFullYear()}-${(sevenDaysAgo.getMonth() + 1).toString().padStart(2, '0')}-${sevenDaysAgo.getDate().toString().padStart(2, '0')}`);
  const date = ref([sevenDaysAgoFormatted.value,new Date().format("yyyy-MM-dd")]);
  const pieChartData = ref([]);
  const goodsAnalysisFn = () => {
    let start = date.value[0];
    let end = date.value[1];
    goodsAnalysis("", start, end).then((res) => {
      if(res.code === 200){  
        let seriesData = [];    
        let colorData = [
          '#6B9BFD','#af71db','#ffa257','#135ddf','#0e8a89','#ffcb32','#4ed9a0','#67cdf7','#67c577','#13cdff',
          '#91cc75','#99cdff','#10757C','#C8778E','#D4B6F4','#8F7059','#EDD18C','#CA3F54','#01448B','#165dff',
          '#FFFF33','#B22222','#FFB6C1','#4B0082','#DDA0DD','#E6E6FA','#F08080','#483D8B','#40E0D0','#330033', 
          '#996666','#996699','#EE0000','#6666FF','#660099','#666699','#0000FF','#FF9933','#CC33CC','#003333',               
        ]; 
        res.data.forEach((item,index) => {
          let obj = {
            name: item.cargoType,
            value: item.rate,
            load: item.load,
            itemStyle: { 
              color: colorData[index]
            }
          };
          seriesData.push(obj);
        });
        pieChartData.value = seriesData;
        let pieChart = echarts.getInstanceByDom(document.getElementById("third-chart"));
        if(pieChart != null && pieChart != "" && pieChart != undefined){
          pieChart.dispose();
        }
        pieChart = echarts.init(document.getElementById('third-chart'));
        let option;
        option = {
          tooltip: {
            trigger: 'item',
            confine: true, //限制在图表区域内
            formatter: function (params) {
              return params.marker + params.data.name + ': ' + params.data.load + '吨，占比：' + params.data.value + '%'
            },    
          },
          // legend: {   
          //   type: 'scroll',          
          // },          
          series: [
            {
              type: 'pie',
              radius: ['70%', '60%'],
              avoidLabelOverlap: false,
              label: {
                show: false,          
              },
              labelLine: {
                show: true, //标签连接线
              },  
              data: seriesData
            }
          ],          
        };
        option && pieChart.setOption(option);
      }
    });     
  };
  const dateChange = () => {
    goodsAnalysisFn();
  };
  //变形监测统计分析
  const deformationData = ref([]);
  const deformationAlysFn = () => {
    defAlySmall().then((res) => {
      if(res.code === 200 && res.data.length){
        deformationData.value = res.data;
      }
    });
  };
  //变形监测观测周期统计分析
  const radio = ref("船闸");
  const radioChange = () => {
    if(radio.value === '船闸'){
      initChuanzhaChart();
    }else if(radio.value === '水坝'){
      initShuibaChart();
    }
  };
  const chuanzhaxAxisData = ref([]);
  const chuanzhaseriesData = ref([]);
  const shuibaxAxisData = ref([]);
  const shuibaseriesData = ref([]);
  const circleAlysFn = () => {
    circleAlys().then((res) => {
      if(res.code === 200){
        res.data.chuanzha.forEach((item) => {
          chuanzhaxAxisData.value.push(item.name);
          chuanzhaseriesData.value.push({
            value: item.cyc,
            itemStyle: {
              color: '#0051FF'
            }
          })
        });
        res.data.shuiba.forEach((item) => {
          shuibaxAxisData.value.push(item.name);
          shuibaseriesData.value.push({
            value: item.cyc,
            itemStyle: {
              color: '#0051FF'
            }
          })
        });   
        initChuanzhaChart();
        initShuibaChart();           
      }
    });    
  };
  const initChuanzhaChart = () => {
    nextTick(() => {
      let barChart = echarts.getInstanceByDom(document.getElementById("fourth-chart"));
      if(barChart != null && barChart != "" && barChart != undefined){
        barChart.dispose();
      }
      barChart = echarts.init(document.getElementById('fourth-chart'));
      let option;
      option = {
        tooltip: {
          trigger: 'axis',
          confine: true, //限制在图表区域内
          formatter: function (params) {
            let template = `${params[0].axisValue}<br>`;         
            for(let i = 0; i < params.length; i++){
              let item = params[i];
              template += item.marker + ' ' + item.data.value + ' 次' + '<br>'
            }  
            return template  
          },  
        },
        legend: {},
        grid: {
          top: '40px',
          left: '40px',
          right: '15px',
          bottom: '40px',
        },
        dataZoom: [
          {
            show: false,
            type: "inside",
            zoomLock: false,
          },
        ],
        xAxis: {
          type: 'category',
          data: chuanzhaxAxisData.value,
        },
        yAxis: {
          type: 'value',
          name: '统计次数：次',
        },
        series: [
          {
            type: 'bar',
            barWidth: "15%",
            data: chuanzhaseriesData.value
          }
        ]
      };

      option && barChart.setOption(option);
    });  
  };
  const initShuibaChart = () => {
    nextTick(() => {
      let barChart = echarts.getInstanceByDom(document.getElementById("fifth-chart"));
      if(barChart != null && barChart != "" && barChart != undefined){
        barChart.dispose();
      }
      barChart = echarts.init(document.getElementById('fifth-chart'));
      let option;
      option = {
        tooltip: {
          trigger: 'axis',
          confine: true, //限制在图表区域内
          formatter: function (params) {
            let template = `${params[0].axisValue}<br>`;         
            for(let i = 0; i < params.length; i++){
              let item = params[i];
              template += item.marker + ' ' + item.data.value + ' 次' + '<br>'
            }  
            return template  
          },  
        },
        legend: {},
        grid: {
          top: '40px',
          left: '60px',
          right: '15px',
          bottom: '40px',
        },
        dataZoom: [
          {
            show: false,
            type: "inside",
            zoomLock: false,
          },
        ],
        xAxis: {
          type: 'category',         
          data: shuibaxAxisData.value,
        },
        yAxis: {
          type: 'value',
          name: '统计次数：次',
        },
        series: [
          {
            type: 'bar',
            barWidth: "15%",
            data: shuibaseriesData.value
          }
        ]
      };

      option && barChart.setOption(option);
    });  
  };
  //基本情况
  const beijiangData = ref({});
  const lianjiangData = ref({});
  const countDataFn = () => {
    screenMapData().then((res) => {
      if(res.code === 200){
        beijiangData.value = res.data[0].beijiang;
        lianjiangData.value =  res.data[0].lianjiang;
      }
    });
  };
  //航道通告
  const noticeData = ref([]);
  const allWaterWayNoticeFn = () => {
    allWaterWayNotice('', '', '', '', 1, 10000).then((res) => {
      if(res.code === 200){
        noticeData.value = res.data.data;
      }
    });
  };
  const seeNotice = (contents) => {
    let reg =  /<a[^>]+href\s*=\s*['"]([^"']+)['"][^>]*>/gi;   
    if(contents.match(reg)){                 
      window.open(`${import.meta.env.VITE_APP_BASE_API}notice${contents.match(reg)[0].slice(25,-2)}`);        
    }else{
      let matchReg = /<img.*?(?:>|\/>)/gi;
      let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
      let data = [];
      let arr = contents.match(matchReg);
      arr.forEach(item => {
        let src = item.match(srcReg);
        data.push(`${import.meta.env.VITE_APP_BASE_API}notice${src[1]}`);
      });

      router.push({
        path: "/pdf",
        query: { content: data.join(',') },
      });
    }    
  };
  //筛选
  const isShowFilter = ref(false);
  //筛选（船闸）
  const checkAll1 = ref(false);
  const isIndeterminate1 = ref(false);
  const checkedValues1 = ref([]);
  const options1 = ['Ⅲ级', 'Ⅳ级', 'Ⅴ级', 'Ⅵ级'];
  const handleCheckAllChange1 = (val) => {
    checkedValues1.value = val ? options1 : [];
    isIndeterminate1.value = false;
    handleSure();
  };
  const handleCheckedChange1 = (value) => {
    const checkedCount = value.length;
    checkAll1.value = checkedCount === options1.length;
    isIndeterminate1.value = checkedCount > 0 && checkedCount < options1.length;
    handleSure();
  };
  //筛选（航道）
  const checkAll2 = ref(false);
  const isIndeterminate2 = ref(false);
  const checkedValues2 = ref([]);
  const options2 = ['北江', '连江'];
  const handleCheckAllChange2 = (val) => {
    checkedValues2.value = val ? options2 : [];
    isIndeterminate2.value = false;
    handleSure();
  };
  const handleCheckedChange2 = (value) => {
    const checkedCount = value.length;
    checkAll2.value = checkedCount === options2.length;
    isIndeterminate2.value = checkedCount > 0 && checkedCount < options2.length;
    handleSure();
  };
  //筛选（辖区）
  const checkAll3 = ref(false);
  const isIndeterminate3 = ref(false);
  const checkedValues3 = ref([]);
  const options3 = ['韶关', '清远'];
  const handleCheckAllChange3 = (val) => {
    checkedValues3.value = val ? options3 : [];
    isIndeterminate3.value = false;
    handleSure();
  };
  const handleCheckedChange3 = (value) => {
    const checkedCount = value.length;
    checkAll3.value = checkedCount === options3.length;
    isIndeterminate3.value = checkedCount > 0 && checkedCount < options3.length;
    handleSure();
  };
  const handleSure = () => {    
    OlArcRef.value.getPositionFn({
      slLevel: checkedValues1.value.join(','),
      hangdao: checkedValues2.value.join(','),
      block: checkedValues3.value.join(',')
    });
  };

  onMounted(() => {
    document.title = "闸坝智能调度与安全检测";
    newWaterFn();
    goodsTonAlysFn();
    goodsAnalysisFn();
    deformationAlysFn();
    circleAlysFn();
    countDataFn();
    allWaterWayNoticeFn();
  });
</script>

<style lang="scss" scoped>
  @font-face{
    font-family: Din;
    src: url("../../assets/fonts/din.ttf");
  }
  @font-face{
    font-family: Tx;
    src: url("../../assets/fonts/tx.ttf");
  }
  .container{    
    width: 2560px;
    height: 1660px;
    box-sizing: content-box;
    .header{
      height: 40px;    
      display: flex;
      align-items: center;  
      justify-content: space-between; 
      background: #FFFFFF;
      box-shadow: 0px 2px 4px 0px rgba(204,213,232,0.3);
      border-radius: 4px;  
      margin: 16px 16px 0px 16px; 
      padding: 0 16px;
      .title{
        font-family: 'Tx';
        font-weight: 500;
        font-size: 18px;
        color: #262626;
      }
      .menu{
        display: flex;
        align-items: center;
        .item{
          font-weight: 400;
          font-size: 16px;
          color: #262626;
          padding: 6px 18px;
          border-radius: 4px;
        }
        .active{
          color: #FFFFFF;
          background: #0051FF;
        }
      }
    }
    .main{
      box-sizing: content-box;
      height: 1604px;
      margin: 16px;      
      display: flex;
      .left-content{        
        width: 614px;
        height: 1572px;        
        box-sizing: content-box;
        background: #FFFFFF;
        .title{
          height: 48px;
          background: linear-gradient( 90deg, rgba(215,227,255,0.4) 0%, #D7E3FF 100%);
          font-weight: 500;
          font-size: 18px;
          color: #262626;
          line-height: 48px;
          padding-left: 16px;
        }
        .subtitle{
          height: 48px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 16px;
          border-bottom: 1px solid #F0F0F0;
          .name{
            font-weight: 500;
            font-size: 16px;
            color: #262626;
          }
          .time{
            font-weight: 400;
            font-size: 16px;
            color: #8C8C8C;
          }
        }
        #first-chart{
          height: 450px;
        }
        .count{
          height: 30px;
          display: flex;
          align-items: center;
          padding-left: 16px;
          .count-item{
            display: flex;
            align-items: center;
            margin-right: 24px;
            .name{
              font-weight: 400;
              font-size: 16px;
              color: #595959;
            }
            .value{
              font-family: 'Din';
              font-weight: bold;
              font-size: 20px;
              color: #262626;
            }
          }
        }
        #second-chart{
          height: 440px;
        }
        .pie-info{
          display: flex;
          #third-chart{
            height: 430px;
            width: 45%;
          }
          .pie-table {
            height: 430px;
            width: 55%;
            overflow-y: scroll;
            padding: 0 16px;
            margin-top: 24px;
            .pie-tbody {
              font-weight: 400;
              font-size: 16px;
              color: #595959;
              .pie-tr {
                display: flex;
                align-items: center;
                justify-content: space-around;
                margin-bottom: 8px;
                .li{
                  width: 8px;
                  height: 8px;
                  border-radius: 0px 0px 0px 0px;
                  opacity: 1;
                  border-radius: 50%;
                  margin-right: 6px;
                }
              }
            }
          } 
        }        
      }
      .middle-content{
        width: 1268px;   
        height: 1572px;
        margin: 0 16px;
        box-sizing: content-box;
        .map{

          height: 1166px;
          margin-bottom: 16px;
          position: relative;
          .legend{
            width: 196px;
            height: 84px;
            background: rgba(5,48,68,0.8);
            border: 1px solid rgba(120,223,255,0.4);  
            position: absolute;
            top: 16px;
            right: 10px; 
            .legend-item{
              display: flex;             
              font-size: 16px;
              font-weight: 400;
              color: #FFFFFF;
              margin: 16px 0px 16px 16px;
              img{
                width: 20px;
                height: 20px;
                padding-right: 8px;                
              }
            }
          }
          .statistics{ 
            position: absolute;
            top: 112px;
            right: 10px;     
            box-sizing: content-box;                                            
            .statistics-item{              
              height: 122px;
              width: 196px;
              background: rgba(5,48,68,0.8);
              border: 1px solid rgba(120,223,255,0.4);
              color: #fff;
              font-size: 16px;
              font-weight: 400;
              .top-info{
                margin: 16px 16px 0px 16px;
              }
              .bottom-info{
                display: flex;                          
                margin: 8px 16px 16px 16px;               
                .level-data{
                  margin-right: 26px;
                  .name{
                    font-weight: 400;
                    font-size: 16px;
                    color: #FFFFFF;
                  }
                  .value{
                    font-size: 28px;
                    margin-top: 4px;
                  }
                }               
              }
            }            
          }
          .filter{
            width: 196px;
            position: absolute;
            top: 382px;
            right: 10px; 
            background: rgba(5,48,68,0.8);
            border: 1px solid rgba(120,223,255,0.4); 
            color: #FFFFFF;
            .filter-title{
              font-weight: 500;
              font-size: 16px;
              color: #FFFFFF;
              background: #042336;
              border-bottom: 1px solid rgba(120,223,255,0.4);
              padding: 8px 0px 8px 16px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              img{
                padding-right: 16px;
              }
            }
            .filter-item{
              margin: 4px 0px 4px 16px;
            }
          }
        }
        .title{
          height: 48px;
          background: linear-gradient( 90deg, rgba(215,227,255,0.4) 0%, #D7E3FF 100%);
          font-weight: 500;
          font-size: 18px;
          color: #262626;
          line-height: 48px;
          padding-left: 16px;
        }
        .notice-list{
          height: 342px;
          background: #FFFFFF;
          overflow-y: auto;
          .notice-item{
            font-weight: 400;
            font-size: 16px;
            color: #262626;
            padding: 16px 0;
            margin: 0 16px;
            border-bottom: 1px solid #F0F0F0;
          }
        }
      }
      .right-content{
        width: 614px;
        height: 1572px;       
        box-sizing: content-box; 
        background: #FFFFFF;
        .title{
          height: 48px;
          background: linear-gradient( 90deg, rgba(215,227,255,0.4) 0%, #D7E3FF 100%);
          font-weight: 500;
          font-size: 18px;
          color: #262626;
          line-height: 48px;
          padding-left: 16px;
        }
        .subtitle{
          height: 48px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 16px;
          border-bottom: 1px solid #F0F0F0;
          .name{
            font-weight: 500;
            font-size: 16px;
            color: #262626;
          }
          .time{
            font-weight: 400;
            font-size: 16px;
            color: #8C8C8C;
          }
        }
        .list{
          height: 848px;
          overflow-y: scroll;  
          box-sizing: content-box; 
          display: flex;
          flex-wrap: wrap;   
          margin: 8px 16px;        
          .list-item{
            width: 48%;
            margin: 0.2%;
            border: 1px solid #F0F0F0;
            .item-title{
              font-weight: 500;
              font-size: 16px;
              color: #262626;
              background: #F8F9FB;
              box-shadow: inset 0px -1px 0px 0px #F0F0F0;
              text-align: center;
              padding: 16px 0;
            }
            .item-name{
              display: flex;
              border-bottom: 1px solid #F0F0F0;
              div{
                width: 25%;
                padding: 11px 0;
                font-weight: 500;
                font-size: 16px;
                color: #262626;
                background: #FFFFFF;
                text-align: center;
              }
            }
            .item-value{
              display: flex;
              div{
                width: 25%;
                padding: 16px 0;
                font-weight: 400;
                font-size: 16px;
                color: #262626;
                background: #FFFFFF;
                text-align: center;
              }
            }
          }
        }
        #fourth-chart{
          height: 580px;
        }
        #fifth-chart{
          height: 580px;
        }
      }
    }
  }
  :deep(.el-checkbox){
    font-weight: 400;
    color: #FFFFFF;
  }
  :deep(.el-checkbox__inner){
    background-color: #D8D8D8;
  }
  :deep(.el-checkbox__input.is-checked+.el-checkbox__label){
    color: #78DFFF;
  }
  :deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner){
    background-color: #78DFFF;
    border-color: #78DFFF;
  }
  :deep(.el-checkbox__input.is-checked .el-checkbox__inner){
    background-color: #78DFFF;
    border-color: #78DFFF;
  }
  :deep(.el-checkbox__inner::after){    
    box-sizing: content-box;
    content: "";
    border: 1px solid black;
    border-left: 0;
    border-top: 0;
    height: 7px;
    left: 4px;
    position: absolute;
    top: 1px;
    transform: rotate(45deg) scaleY(0);
    width: 3px;
    transition: transform .15s ease-in 50ms;
    transform-origin: center;
  }
  :deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner::before){
    content: "";
    position: absolute;
    display: block;
    background-color: black;
    height: 2px;
    transform: scale(.5);
    left: 0;
    right: 0;
    top: 5px;
  }
</style>